<template>
    <view :style="{ '--color': color }">
        <!-- #ifdef MP-WEIXIN -->
        <navBar :bgMake="5" :Color="2" :fromShare="fromShare" :title="title"></navBar>
        <!-- #endif -->

        <swiper
            class="swiper"
            :indicator-dots="pageData && pageData.album.length > 1"
            indicator-color="#ccc"
            :indicator-active-color="color"
            circular
            :autoplay="true"
            :interval="4000"
            :duration="1000"
            v-if="pageData && pageData.album.length"
        >
            <swiper-item v-for="(item, index) in pageData.album" :key="index">
                <image :src="$imgUrls(item)" mode="aspectFill" class="wh" @click="LookObject(index)" @error="handleImageError(index)"></image>
            </swiper-item>
        </swiper>

        <view class="DetailsBox">
            <view class="UserInfo bot">
                <view class="d-flex f-column">
                    <view class="d-flex a-center">
                        <text class="size32 black bold m-right20">{{ pageData.v_name }}</text>
                        <view class="iconfont icon-nvsheng size38 color_FF6" v-if="pageData.v_sex == 0"></view>
                        <view class="iconfont icon-nansheng size36 color_52" v-if="pageData.v_sex == 1"></view>
                    </view>

                    <text class="color_33 size26 m-top12" selectable>ID：{{ pageData.sn_id }}</text>
                </view>
                <view class="d-flex f-column a-center p-left30" @click="followBtn" v-if="vid != info.follow_v_id">
                    <view class="iconfont color size46" :class="info.is_follower ? 'icon-a-zu3749' : 'icon-a-zu3750'"></view>
                    <text class="color_cc h7 m-top4">关注</text>
                </view>
            </view>
            <view class="row a-center m-top20">
                <view class="flex-1 d-flex a-center">
                    <view class="infoIcon flexac">
                        <view class="iconfont icon-xinxi size36 color_33"></view>
                    </view>
                    <text class="color_33 size26 p-left10 ellipsis">{{ pageData.age_info ? pageData.age_info : '-' }}</text>
                </view>
                <view class="flex-1 d-flex a-center">
                    <view class="infoIcon flexac">
                        <view class="iconfont icon-xinxi2 size42 color_33"></view>
                    </view>
                    <text class="color_33 size26 p-left10 ellipsis">{{ pageData.height ? pageData.height : '-' }}</text>
                </view>
            </view>
            <view class="row a-center m-top10">
                <view class="flex-1 d-flex a-center">
                    <view class="infoIcon flexac">
                        <view class="iconfont icon-a-weibiaoti-1_huaban1fuben40 size38 color_33"></view>
                    </view>
                    <text class="color_33 size26 p-left10 ellipsis">{{ pageData.education ? pageData.education : '-' }}</text>
                </view>
                <view class="flex-1 d-flex a-center">
                    <view class="infoIcon flexac">
                        <view class="iconfont icon-gongwenbao-L size34 color_33"></view>
                    </view>
                    <text class="color_33 size26 p-left10 ellipsis">{{ pageData.career ? pageData.career : '-' }}</text>
                </view>
            </view>
            <view class="row a-center m-top12">
                <view class="iconfont icon-home size34 color_33 m-left6"></view>
                <view class="flex-1 color_33 size26 m-left16">{{ pageData.living_place }}</view>
            </view>
        </view>

        <view class="DetailsBox">
            <view class="Details_Title">Ta的详细资料</view>
            <view class="rows d-flex m-top10">
                <view class="infoIcon m-right10 m-top20">
                    <view class="iconfont icon-dingdan01 black size42"></view>
                </view>
                <view class="flex-1 d-flex f-wrap">
                    <view class="tips" v-if="pageData.salary">{{ pageData.salary }}</view>
                    <view class="tips" v-if="pageData.only_child">{{ pageData.only_child }}</view>
                </view>
            </view>
            <view class="rows d-flex m-top10">
                <view class="infoIcon m-right10 m-top20">
                    <view class="iconfont icon-home3 black size42"></view>
                </view>
                <view class="flex-1 d-flex f-wrap">
                    <view class="tips" v-if="pageData.house">{{ pageData.house }}</view>
                    <view class="tips" v-if="pageData.car">{{ pageData.car }}</view>
                </view>
            </view>
            <view class="rows d-flex m-top10">
                <view class="infoIcon m-right10 m-top20">
                    <view class="iconfont icon-dingdanyichenggong black size42"></view>
                </view>
                <view class="flex-1 d-flex f-wrap">
                    <view class="tips" v-if="pageData.wedding">{{ pageData.wedding }}</view>
                    <view class="tips" v-if="pageData.wedding_time">{{ pageData.wedding_time }}</view>
                </view>
            </view>
        </view>

        <view class="DetailsBox">
            <view class="Details_Title">Ta的特点</view>
            <view class="row m-top10" v-if="pageData.feature">
                <view class="peculiarity" v-for="(item, index) in pageData.feature" :key="index">{{ item }}</view>
            </view>
            <emptys :top="0" v-else></emptys>
        </view>

        <view class="DetailsBox">
            <view class="Details_Title">Ta希望你</view>
            <view class="rows d-flex m-top10" v-if="pageData.hope_info">
                <view class="infoIcon m-right10 m-top20">
                    <view class="iconfont icon-dingdan01 black size42"></view>
                </view>
                <view class="flex-1 d-flex f-wrap">
                    <view class="tips" v-for="(item, index) in pageData.hope_info" :key="index">{{ item }}</view>
                </view>
            </view>

            <view class="rows d-flex m-top10" v-if="pageData.hope_info_other">
                <view class="infoIcon m-right10 m-top20">
                    <view class="iconfont icon-yonghuxieyi- black size42"></view>
                </view>
                <view class="flex-1 d-flex f-wrap">
                    <view class="tips" v-for="(item, index) in pageData.hope_info_other" :key="index">{{ item }}</view>
                </view>
            </view>
            <emptys :top="0" v-if="!pageData.hope_info && !pageData.hope_info_other"></emptys>
        </view>

        <view class="rows">
            <view class="Cutoff"></view>
            <view class="footer" v-if="vid != info.follow_v_id">
                <view class="footBox">
                    <view class="footList know" @click.stop="knowBtn">想认识Ta</view>
                    <view class="footList woman" @click.stop="Contact = true">红娘牵线</view>
                </view>
            </view>
        </view>

        <Load v-if="!pageData"></Load>
        <Contact :Contact="Contact" :matchmaker="matchmaker" @closePop="Contact = false"></Contact>
        <know :know="know" :pageData="pageData" v-if="pageData" @closePop="know = false"></know>
    </view>
</template>

<script>
    import navBar from '@/components/navBar/navBar.vue';
    import { mapState, mapMutations } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        components: {
            navBar
        },
        data() {
            return {
                fromShare: 0,
                Contact: false,
                know: false,
                title: '详情',
                follow: false,
                info: '',
                pageData: '',
                id: '',
                matchmaker: {}
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            if (opt.fromShare) this.fromShare = opt.fromShare;
        },
        onShow() {
            this.user_base_info();
        },

        methods: {
            user_base_info() {
                this.$http
                    .get({
                        url: '/WeddingApi/user_base_info',
                        data: {
                            id: this.id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return;
                        const result = res.data;
                        this.info = result;
                        if (result.show.image) result.show.album.unshift(result.show.image);
                        this.pageData = result.show;
                        this.matchmaker = result.matchmaker;
                        this.Load = false;

                        // #ifdef H5
                        let param = `pageType=2&artId=${this.id}&share_v_id=${this.vid}`;
                        let share_obj = {
                            title: this.pageData.v_name,
                            desc: this.pageData.desc,
                            imgUrl: this.pageData.image
                        };
                        this.$H5Share(param, share_obj);
                        // #endif
                    });
            },
            followBtn() {
                if (!this.vid) return this.toUrl(`/User/login`);
                this.$http
                    .post({
                        url: '/WeddingApi/followMember',
                        data: {
                            follow_v_id: this.info.follow_v_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.info.is_follower == 0 ? (this.info.is_follower = 1) : (this.info.is_follower = 0);
                    });
            },

            async knowBtn() {
                let that = this;
                if (!this.vid) return this.toUrl(`/User/login`);
                if (this.info.is_vip == 1 && this.info.is_buy == 1) return (this.know = true);
                if (this.info.is_vip == 0) {
                    this.$pop.model('提示', '暂未开通会员，是否开通会员？', '开通会员').then((res) => {
                        if (res) this.$pageTab(`/pages/Vip/Vip`);
                    });
                    return;
                }
                if (this.info.is_buy == 0) {
                    const requestResult = await Api.createWeddingOrder(this.vid);
                    if (!requestResult) return;
                    console.log(`https://sra.mogoie.com/index.php${requestResult}`);
                    window.location.href = `https://sra.mogoie.com/index.php${requestResult}`;
                }
            },

            //  会员查看大图，保存图片
            LookObject(index) {
                if (!this.vid) return this.toUrl(`/User/login`);
                if (this.vid == this.info.follow_v_id || this.info.is_vip == 1) return this.$ImageNum(index, this.pageData.album);
                this.$pop.model('提示', '暂未开通会员，是否开通会员？', '开通会员').then((res) => {
                    if (res) this.$pageTab(`/pages/Vip/Vip`);
                });
            },

            handleImageError(index) {
                this.pageData.album.splice(index, 1);
            }
        },
        computed: {
            ...mapState(['color', 'vid'])
        },
        onShareAppMessage() {
            let share = this.pageData;
            return {
                title: share.v_name,
                desc: share.desc,
                path: `/pages/startUp/startUp?share_v_id=${this.vid}&pageType=2&artId=${this.id}`,
                imageUrl: this.$imgUrls(share.image)
            };
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $pageBg;
    }
</style>
<style lang="scss" scoped>
    .swiper {
        width: 690rpx;
        height: 690rpx;
        margin: 20rpx auto 0 auto;
        border-radius: 16rpx;
        overflow: hidden;
        transform: translateY(0);
    }

    .DetailsBox {
        width: 690rpx;
        padding: 24rpx;
        margin: 30rpx auto 0 auto;
        border-radius: 16rpx;
        overflow: hidden;
        background-color: #ffffff;
    }

    .UserInfo {
        width: 100%;
        padding-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .infoIcon {
        width: 50rpx;
        height: 50rpx;
        overflow: hidden;
    }

    .Details_Title {
        position: relative;
        padding-left: 24rpx;
        color: #000;
        font-size: 32rpx;
        font-weight: bold;
    }

    .Details_Title::after {
        content: '';
        width: 8rpx;
        height: 30rpx;
        background-color: var(--color);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 15rpx;
        overflow: hidden;
    }

    .tips {
        padding: 8rpx 20rpx;
        background-color: $pageBg;
        border-radius: 30rpx;
        font-size: 26rpx;
        color: #000;
        margin-right: 20rpx;
        margin-top: 20rpx;
    }

    .tips:last-child {
        margin-right: 0;
    }

    .peculiarity {
        border: 1rpx solid var(--color);
        color: var(--color);
        font-size: 26rpx;
        padding: 4rpx 24rpx;
        border-radius: 30rpx;
        overflow: hidden;
        margin-top: 20rpx;
        margin-right: 20rpx;
    }

    .peculiarity:last-child {
        margin-right: 0;
    }

    .footer {
        width: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .footBox {
        width: 100%;
        height: 120rpx;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .footList {
        width: 260rpx;
        height: 80rpx;
        font-size: 30rpx;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .know {
        color: #ffffff;
        background-color: var(--color);
    }

    .woman {
        background-color: #ffffff;
        color: var(--color);
    }

    .Cutoff {
        width: 100%;
        height: 120rpx;
        box-sizing: content-box;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
</style>
